<div class="dialog-container mdl-shadow--8dp mdl-layout--fixed-header MachineList-dialog" ng-init="dialog.init();">
  <div class="kmi-header-row">
      <div class="header-title" ng-bind="('A02.workStationInput.line'+dialog.isLine | translate)+('A02.workStationInput.title'+dialog.MachineListMode | translate)"></div>
      <div class="kmi-side-btn right" ng-click="dialog.back();">
          <img src="image/icons/clear.png"></img>
          <div class="kmi-can-click"></div>
      </div>
  </div>
  <div class="kmi-layout-main-content">
    <div class="kmi-layout-page">
        <div class="kmi-text-fields">
            <label class="label" ng-bind="'A02.plot_no' | translate"></label>
            <label class="value" ng-bind="dialog.dispatchItem.LotNo"></label>
            <label class="label" style="padding-left:8px;" ng-bind="'A02.DispatchQty' | translate"></label>
            <label class="value" ng-bind="dialog.Qty_show"></label>
        </div>
        <div class="kmi-text-fields condition-panel">
            <label class="label" ng-bind="'A02.assigned_date' | translate"></label>
            <div class="date-panel">
                <button class="mdl-button mdl-js-button mdl-button--icon" ng-click="dialog.prevDate();">
                    <img src="image/icons/dropleft.png"></img>
                </button>
                <input style="flex:0 0 130px;text-align:center;margin-top: 2px;" ng-value="dialog.work_date |date:'yyyy - MM - dd'" readonly ng-click="dialog.changeDate();"/>
                <button class="mdl-button mdl-js-button mdl-button--icon" ng-click="dialog.nextDate();">
                    <img src="image/icons/dropright.png"></img>
                </button>
            </div>
        </div>
        <div class="kmi-list column-selector">
            <div class="kmi-list__header">
                <!--20220831 modify by yuting for M#118305:[3.3.4發版測試][MSSQL/ORACLE] 派工作業>分量派工 語系錯誤-->
                <!--div class="kmi-list__column" style="flex:0 0 28px;"  column-name="{{'A02.workStationInput.list.column7' | translate}}"></div>-->
                <div class="kmi-list__column" style="flex:0 0 28px;"></div>  
                <!-- 设备编号 -->
                <div class="kmi-list__column require head-controls" style="flex:1;">
                    <div class="filter" ng-show="dialog.dispatch_filterSH.machine_no">
                        <input ng-model="dialog.dispatch_filter.machine_no">
                        <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                           ng-click="dialog.dispatch_filterSH.machine_no = false;dialog.dispatch_filter.machine_no = '';">clear</i>
                    </div>
                    <div class="order" ng-hide="dialog.dispatch_filterSH.machine_no">
                        <i class="material-icons search" style="z-index:1;" ng-click="dialog.dispatch_filterSH.machine_no = true">search</i>
                        <label ng-bind="'A02.workStationInput.list.column1'| translate"></label>
                        <i class="material-icons" ng-show="dialog.order_by_mode.name == 'machine_no'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                        <div class="kmi-can-click" ng-click="dialog.orderbychange('machine_no')"></div>
                    </div>
                </div>
                <!-- 设备名称 -->
                <div class="kmi-list__column head-controls" style="flex:1;">
                    <div class="filter" ng-show="dialog.dispatch_filterSH.machine_name">
                        <input ng-model="dialog.dispatch_filter.machine_name">
                        <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                           ng-click="dialog.dispatch_filterSH.machine_name = false;dialog.dispatch_filter.machine_name = '';">clear</i>
                    </div>
                    <div class="order" ng-hide="dialog.dispatch_filterSH.machine_name">
                        <i class="material-icons search" style="z-index:1;" ng-click="dialog.dispatch_filterSH.machine_name = true">search</i>
                        <label ng-bind="'A02.workStationInput.list.column2'| translate"></label>
                        <i class="material-icons" ng-show="dialog.order_by_mode.name == 'machine_name'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                        <div class="kmi-can-click" ng-click="dialog.orderbychange('machine_name')"></div>
                    </div>
                </div>
                <!-- 产能 -->
                <div class="kmi-list__column head-controls" style="flex:0 0 80px;">
                    <div class="filter" ng-show="dialog.dispatch_filterSH.capacity">
                        <input ng-model="dialog.dispatch_filter.capacity">
                        <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                           ng-click="dialog.dispatch_filterSH.capacity = false;dialog.dispatch_filter.capacity = '';">clear</i>
                    </div>
                    <div class="order" ng-hide="dialog.dispatch_filterSH.capacity">
                        <i class="material-icons search" style="z-index:1;" ng-click="dialog.dispatch_filterSH.capacity = true">search</i>
                        <label ng-bind="'A02.workStationInput.list.column3'| translate"></label>
                        <i class="material-icons" ng-show="dialog.order_by_mode.name == 'capacity'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                        <div class="kmi-can-click" ng-click="dialog.orderbychange('capacity')"></div>
                    </div>
                </div>
                <!-- 已派产能 -->
                <div class="kmi-list__column head-controls" style="flex:0 0 80px;">
                    <div class="filter" ng-show="dialog.dispatch_filterSH.used_capacity">
                        <input ng-model="dialog.dispatch_filter.used_capacity">
                        <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                           ng-click="dialog.dispatch_filterSH.used_capacity = false;dialog.dispatch_filter.used_capacity = '';">clear</i>
                    </div>
                    <div class="order" ng-hide="dialog.dispatch_filterSH.used_capacity">
                        <i class="material-icons search" style="z-index:1;" ng-click="dialog.dispatch_filterSH.used_capacity = true">search</i>
                        <label ng-bind="'A02.workStationInput.list.column4'| translate"></label>
                        <i class="material-icons" ng-show="dialog.order_by_mode.name == 'used_capacity'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                        <div class="kmi-can-click" ng-click="dialog.orderbychange('used_capacity')"></div>
                    </div>
                </div>
                <!-- 负荷率 -->
                <div class="kmi-list__column head-controls" style="flex:0 0 80px;">
                    <div class="filter" ng-show="dialog.dispatch_filterSH.machine_load">
                        <input ng-model="dialog.dispatch_filter.machine_load">
                        <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                           ng-click="dialog.dispatch_filterSH.machine_load = false;dialog.dispatch_filter.machine_load = '';">clear</i>
                    </div>
                    <div class="order" ng-hide="dialog.dispatch_filterSH.machine_load">
                        <i class="material-icons search" style="z-index:1;" ng-click="dialog.dispatch_filterSH.machine_load = true">search</i>
                        <label ng-bind="'A02.workStationInput.list.column5'| translate"></label>
                        <i class="material-icons" ng-show="dialog.order_by_mode.name == 'machine_load'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                        <div class="kmi-can-click" ng-click="dialog.orderbychange('machine_load')"></div>
                    </div>
                </div>
                <!-- 派工数量 -->
                <div class="kmi-list__column head-controls" style="flex:0 0 108px;">
                    <div class="filter" ng-show="dialog.dispatch_filterSH.inputQty">
                        <input ng-model="dialog.dispatch_filter.inputQty">
                        <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                           ng-click="dialog.dispatch_filterSH.inputQty = false;dialog.dispatch_filter.inputQty = '';">clear</i>
                    </div>
                    <div class="order" ng-hide="dialog.dispatch_filterSH.inputQty">
                        <i class="material-icons search" style="z-index:1;" ng-click="dialog.dispatch_filterSH.inputQty = true">search</i>
                        <label ng-bind="'A02.workStationInput.list.column6'| translate"></label>
                        <i class="material-icons" ng-show="dialog.order_by_mode.name == 'inputQty'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                        <div class="kmi-can-click" ng-click="dialog.orderbychange('inputQty')"></div>
                    </div>
                </div>
            </div>
            <div class="kmi-list__row-content">
                <div class="kmi-list__row" ng-repeat="item in dialog.getMachineList(dialog.machineList, dialog.dispatch_filter) track by $index">
                    <div class="kmi-list__column" style="flex:0 0 28px;">
                        <div class="dashboard-light-panel" ng-class="[dialog.mlightColor(item.load_status)]"></div>
                    </div>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="item.machine_no"></div>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="item.machine_name"></div>
                    <div class="kmi-list__column" style="flex:0 0 80px;" ng-bind="item.capacity+'HR'"></div>
                    <div class="kmi-list__column" style="flex:0 0 80px;" ng-bind="item.used_capacity+'HR'"></div>
                    <div class="kmi-list__column" style="flex:0 0 80px;" ng-bind="item.machine_load+'%'"></div>
                    <div class="kmi-list__column column-border column-input" style="flex:0 0 108px;">
                        <input mdl-calculater="item.inputQty" mdl-calculater-decimal="true" readonly="readonly"/>
                    </div>
                </div>
            </div>
        </div>
        <!--
        <div class="kmi-list dialog-machine-list">
            <div class="kmi-list__row-content perfect-scrollbar">
            <div class="kmi-list__row" ng-repeat="item in dialog.machineList track by $index"  ng-class="[dialog.mlightColor(item.load_status)]">
                <div class="kmi-list__column" style="flex:0 1 250px;">
                {{('A02.mlist.column1'|translate)+item.machine_name+'('+item.machine_no+')'}}
                </div>
                <div class="kmi-list__column" style="flex: 1;text-align: center;">
                {{('A02.mlist.column2'|translate)+item.capacity + "HR ; " +('A02.mlist.column3'|translate)+item.used_capacity+ "HR ; " +('A02.mlist.column4'|translate)+item.machine_load + "%"}}
                </div>
                <div class="kmi-list__column column-input">
                    <input ng-init="item.inputQty = 0" readonly="readonly" ng-click="dialog.input_inputQty($event, item);" mdl-calculater="item.inputQty" mdl-calculater-title="{{('A02.mlist.column1'|translate)+item.machine_no}}">
                </div>
            </div>
            </div>
        </div>
    -->
    </div>
    <div style="display:flex;justify-content: flex-end;flex:0 0 44px">
        <div style="display:flex;">
            <div class="kmi-button kmi-button-confrim" ng-click="dialog.confirm();" style="width:100px;">
                <label ng-bind="'common.btn.confirm' | translate"></label>
                <div class="kmi-can-click"></div>
            </div>
        </div>
    </div>
  </div>
</div>
